<template>
    <FormItem :label="item.title" :prop="item.key" :rules="rules">
      <template #label>
        <slot name="label">
          <Tooltip transfer v-if="item.tip&&item.tip.icon" :theme="item.tip.theme" :placement="item.tip.placement">
            <span slot="content" v-html="item.tip.content" :style="item.tip.contentStyle"></span>
            <Icon :type="item.tip.icon" :size="item.tip.size" :style="item.tip.iconStyle" />
          </Tooltip>
          <span v-html="item.title" :style="item.titleStyle"></span>
        </slot>
      </template>
        <AtomEditor v-if="!onlyRead" 
            :config="item.config" :value="value" @change="change"></AtomEditor>
        <span class="ivu-input" v-else>{{value}}</span>
    </FormItem>
</template>

<script>
export default {
  name:'AtomFormItem',
  components: {},
  data() {
    return {
      
    };
  },
  props: {
    value:{
      default:()=>{
        return null;
      }
    },
    item:{
      default:()=>{
        return {};
      }
    },
    rules:{
      default:()=>{
        return {};
      }
    },
    onlyRead:{
      default:()=>{
        return false;
      }
    },
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    change(val){
      this.$emit('change',val)
    }
  }
};
</script>
<style scoped>
</style>
<style>
.ivu-input[disabled],
fieldset[disabled] .ivu-input {
  background-color: #f3f3f3;
}
.ivu-input[disabled]:hover,
fieldset[disabled] .ivu-input:hover {
  background-color: #f3f3f3;
}
.ivu-select-disabled .ivu-select-selection,
.ivu-input-number-disabled .ivu-input-number-input {
  background-color: #f3f3f3;
}
.ivu-input[disabled],
fieldset[disabled] .ivu-input,
.ivu-select-input[disabled],
.ivu-input-number-input[disabled] {
  color: #333;
}
</style>